---
sidebar_position: 1
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';

# Installation

> Note: React 16.8+ is required to use Hooks.

## Yarn & NPM

To install the package we use our favorite package manager.

<Tabs
  defaultValue="yarn"
  values={[
    {label: 'Yarn', value: 'yarn'},
    {label: 'NPM', value: 'npm'},
  ]}>
  <TabItem value="yarn">
    <CodeBlock className="language-shell">yarn add react-hotkeys-hook</CodeBlock>
  </TabItem>
  <TabItem value="npm">
    <CodeBlock className="language-shell">npm i react-hotkeys-hook --save</CodeBlock>
  </TabItem>
</Tabs>

## ES Module

To use the ES Module we can reference it directly from [unpkg.com](https://unpkg.com):

```js
import { useHotkeys } from 'https://unpkg.com/browse/react-hotkeys-hook@3.4.0/dist/react-hotkeys-hook.esm.js';
```

## Direct CommonJS Module

We also have access to a development as well as a minified production bundle for CommonJS:

<Tabs
  defaultValue="development"
  values={[
    {label: 'Development', value: 'development'},
    {label: 'Production', value: 'production'},
  ]}>
  <TabItem value="development">
    <CodeBlock className="language-html">
      {'<script src="https://unpkg.com/browse/react-hotkeys-hook@3.4.0/dist/react-hotkeys-hook.cjs.development.js"/>'}
    </CodeBlock>
  </TabItem>
  <TabItem value="production">
    <CodeBlock className="language-html">
      {'<script src="https://unpkg.com/browse/react-hotkeys-hook@3.4.0/dist/react-hotkeys-hook.cjs.production.min.js"/>'}
    </CodeBlock>
  </TabItem>
</Tabs>

***

Now we are good to go to use the hook.
